Kiegészítő anyag

Űrlapok kezelése Javascript segítségével

Az űrlapok önmagukban nem sokra hasznosíthatók. Ha viszont Javascript-et illesztünk hozzá, máris sokkal dinamikusabb oldalakat tudunk gyártani. Egy egyszerű példán keresztül szeretnék bemutatni pár lehetőséget. Figyeld az animációt, ha kell állítsd meg, próbáld megérteni a leírtakat. majd hasznosítsd kedved szerint.

Ha Javascript-tel szeretnénk lekezelni az űrlapelemeket, első fontos dolog, hogy adjunk mindennek nevet. Az űrlapnak magának, s a benne definiált űrlapelemeknek egyaránt, ugyanis mindenre a nevével fogunk hivatkozni.

A HTML oldal az objektumokat egymásba ágyazottan tárolja. Ez azt jelenti, hogy létezik maga a weboldal, abban vannak az űrlapok, s az űrlapok tárolják a bennük levő űrlapelemeket. Ettel még nincs vége: az űrlapelemek tárolják a saját jellemzőiket, mint például a bele írt értéket. Így is tudunk rájuk hivatkozni. A nev nevű mező értékét pl. a document.belepteto.nev.value sorozattal érhetjük el. A document maga a weblap, a belepteto az űrlap, a nev az űrlap egyik mezője, a value pedig a benne tárolt értéket jelenti. Láthatjuk, hogy pontokkal kell elválasztanunk őket.

Létezik a FORM-nak egy onSubmit tulajdonsága is. Ennek egyetlen paramétere van, egy függvény neve, amely majd visszaad egy értéket, amely alapján vagy továbbküldjük, vagy sem az űrlap adatait. A példában ezt az ellenor() nevű függvény fogja elvégezni. Nézzük meg a függvényt!
A Javascript részeket <SCRIPT> </SCRIPT> tagek közé kell helyezzük, hogy ne keveredjenek a HTML tag-ekkel. A függvény a function kifejezéssel kezdődik, ezt követi a függvény neve, majd { } jelek között a függvény maga. Induláskor feltételezzük, hogy nincs semmi hiba az űrlapon, majd elkezdjük vizsgálni az űrlap mezőit. Ha valamelyik hibás lenne, azaz nincs kitöltve, akkor HAMIS-ra állítjuk a továbbküldést jelző változót. A végén visszaküldjük az eredményt a hívó félnek, azaz jelen esetben az onSubmit metódusnak, aki eldönti, hogy a visszaadott érték alapján mit kell tennie.

Másik igen hasznos dolog weboldalaink építésekor a stíluslap. Ennek segítségével vagy már meglevő tag-eket tudunk formailag átdefiniálni, vagy magunk is készíthetünk saját stílusokat. Olyan ez, mint a <H1> tag. Ez a tag önmagában 36 pontosra és félkövérre formázza a szöveget anélkül, hogy a <FONT> vagy a <B> tag-ek bármelyikét használtuk volna. Definiálásuk igen egyszerű: <STYLE> </STYLE> tag-ek közé kell mindenképpen tenni, majd jöhet a tag neve, utána pedig { } jelek között a definíció. Rengeteg lehetőségünk van, akinek szüksége van oktatóanyagra, biztosan talál magának megfelelő fórumot az Interneten. A példák egyszerűek: betűtípus, betűstílus, betűméret, szín és háttérszín. Ezek a legfontosabbak.
Léteznek ún. módosítók, mint pl. a hover. Ez egy olyan módosítás, amely akkor lép érvénybe, ha a megadott objektum fölött tartózkodik a kurzor. A példában megváltoztatjuk az objektum háttérszínét. Ha már nincs a kurzor az objektumon, a hatás elmúlik, illetve visszavált az előző, eredeti értékre.